/**
 * Created by hdw on 2017/5/16.
 */
import React, {Component} from 'react'
import {Link} from 'react-router'
import '../sass/WillLike'
import {forceCheck} from 'react-lazyload'

import WillLikeDefaultBg from '../../global/components/WillLikeDefaultBg'
import LazyLoad from 'react-lazyload'

export default class WillLike extends Component {
  constructor() {
    super()
  }
  componentDidMount() {
    let oMain = document.getElementsByClassName('wrapper')[0]

    oMain.onscroll = function() {
      forceCheck()
    }
  }

  render() {
    const {items, fetchAddToCart} = this.props
    let imgWidth = `${(window.innerWidth - 30) * 0.263}px`

    return (
        <div className="will-like">
          {
            items && items.map((item, id) =>
                <div className="like-box" key={id}>
                    <Link to={`/p/${item.goodsId}`} style={{display: 'block', minHeight: imgWidth}}>
                        <div style={{minHeight: imgWidth}}>
                            <LazyLoad placeholder={<WillLikeDefaultBg/>}>
                                <img src={item.pictureUrl ? item.pictureUrl : require('../images/goods_default.png')} alt="" style={{display: 'block'}}/>
                            </LazyLoad>
                        </div>
                    </Link>
                    <Link to={`/p/${item.goodsId}`}><p className="goodsname">{item.name}</p></Link>
                    <p className="goodsprice">{item.salePrice ? item.salePrice : item.price} <i className="iconfont icon-tianjiagouwuche"
                                                                                              onClick={fetchAddToCart.bind(this, {
                                                                                                count: '1',
                                                                                                goodsId: item.goodsId,
                                                                                                status: '1',
                                                                                                add: true
                                                                                              })}/></p>
                </div>
            )
          }
        </div>
    )
  }
}
